<template>
	<view>
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">服务</view>
				<view class="right_box">
					<view class="navigation-illustrate" @click="goTransaction()">零钱明细</view>
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<view class="piece">
			<view class="piece-content">
				<image class="lingqian-img" src="../../static/image/lingqian.png"></image>
				<text class="lingqian-text">我的零钱</text>
				<!--
				<view class="divider"></view>
				-->
				<view class="lingqian-title d-flex j-center">
					<view class="lingqian-title-v">余额</view>
					<!--
					<view class="lingqian-title-v">待结算</view>
					-->
				</view>
				<view class="lingqian-qian d-flex j-center">
					<view class="lingqian-qian-v"><text class="lingqian-qian-t">¥</text>&nbsp;{{centToYuan(walletInfo.executedAmount)}}</view>
					<!--
					<view class="lingqian-qian-v"><text class="lingqian-qian-t">¥</text>&nbsp;{{centToYuan(walletInfo.invalidAmount)}}</view>
					-->
				</view>
				<!--
				<view class="button-tixian" @tap="goCashOut">提现</view>
				-->
				<tm-button class="button-tixian w-center" :width="590" :shadow="-1"
					:linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="goCashOut"
					label="提现"></tm-button>
				<tm-button class="button-chongzhi w-center" :width="590" :shadow="-1"
					linear="left" :fontSize="32" :outlined="true" color="#1DC691" @tap="rechargePopup.open()"
					label="充值"></tm-button>
				<view class="button-shuoming"><text @tap="goSetPayPwd">支付密码</text> | <text @tap="goDesp">提现说明</text></view>
			</view>
			
		</view>
		<recharge ref="rechargePopup" @callback="loadData"></recharge>
		<!--删除控件-->
		<uni-popup ref="popupRealName" :safe-area="false" :mask-click="false">
			<view class="sys-confirm-content">
				<view class="confirm-content-title">你还没有实名认证，请先完成实名认证</view>
				<view  @tap="goRealName" class="content-button button-confirm" style="color: #1DC691;">去认证</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="goBack" class="content-button" style="color: #999999;">取消</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="tsx" name="serve">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getWallet } from "@/api/api";
import { centToYuan } from "@/utils/format";
import { userData as userDataStore } from "@/store/userData";
import recharge from "./components/recharge.vue";




const goBack = () => {
	uni.navigateBack();
};
//跳转交易记录页面
const goTransaction = () => {
	uni.navigateTo({
		url:`/pages/transaction/transaction`
	});
};
//跳转交易记录页面
const goCashOut = () => {
	uni.navigateTo({
		url:`/pages/cashOut/cashOut`
	});
};
const goRealName = () => {
	uni.navigateTo({
		url:`/pages/userinfo/card`
	});
	popupRealName.value.close()
};

const goConsumption = () => {
	uni.navigateTo({
		url:`/pages/transaction/consumption`
	});
};
let walletInfo: any = ref({});
const userData: any = userDataStore();
onShow(() => {
	loadData()
	
});
const popupRealName = ref()
const loadData = () => {
	getWallet({userId:userData.id}).then((res: any) => {
		walletInfo.value = res.data
		
		if(userData.isRealName === 0){
			popupRealName?.value?.open("bottom");
		}
	});
}
const goDesp = () => {
	uni.navigateTo({
		url:`/pages/serve/desp`
	});
};
const goSetPayPwd = () => {
	uni.navigateTo({
		url:`/pages/setPayPwd/setPayPwd`
	});
};
const rechargePopup = ref()
</script>

<style lang="scss" scoped>
@import './serve.scss';
</style>
